<template>
	<view class="page" >
	<!-- <view class="page" :style="indexbgStyle"> -->
		<!-- <view class="navi-top">

		</view> -->
		<view class="content">
			<!-- <view class="tips">
				保存图片通过微信扫码即可加入群聊享受推荐哦~
			</view> -->
			<view class="flex_center qr-code-box">
				<image class="qr-code" :src="joinInfo.image || groupQrUrl" mode="scaleToFill" show-menu-by-longpress />
			</view>
			<!-- #ifdef MP-WEIXIN -->
			<!-- <view class="tips">长按识别二维码，加入群聊</view> -->
			<!-- <view class="flex_center join-btn" @click="joinClick">
				<view class="btn flex_center">
					加入群聊
				</view>
			</view> -->
			<view class="flex_center join-btn">
				<!-- <cell :url='wxUrl' :iconBorderRadius="4" contactText="加入群聊" /> -->
				<cell @startmessage='startmessage' @completemessage="completemessage" :url='wxUrl' contactText="加入群聊" />
			</view>
			<!-- #endif -->
			<!-- #ifndef MP-WEIXIN -->
			<view class="flex_center join-btn" @click="saveImage">
				<view class="btn flex_center">
					保存到相册
				</view>
			</view>
			<view class="tips">
				保存图片，微信扫码进群
			</view>
			<!-- #endif -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				groupQrUrl: 'https://pic.bangbangtongcheng.com/b0d47a6aad834ffab375eefe6dad4803.png',
				wxUrl: 'https://work.weixin.qq.com/gm/3ad1867b587bc86a7f12be9235d1acd2',
				userInfo: uni.getStorageSync('Pduser'),
				joinInfo: {},
			}
		},
		computed: {
		},
		onLoad(opt) {
			this.getQrCodeUrl();
		},
		methods: {
			async getQrCodeUrl(){
				const res = await this.$myRequest.get('/mob/home/getBanner?', {
					type: 16,
				})
				if (res.code === 200 && res.list.length) {
					this.joinInfo = res.list[0];

				}
			},
			saveImage() {
				// 先请求权限（仅小程序需）
				// #ifdef MP-WEIXIN
				uni.authorize({
					scope: 'scope.writePhotosAlbum',
					success: () => {
						this.downloadAndSave();
					},
					fail: () => {
					uni.showModal({
						title: '提示',
						content: '需要授权保存到相册，请到设置中开启权限',
						success: (res) => {
							if (res.confirm) {
								uni.openSetting();
							}
						}
					});
					}
				});
				// #endif

				// App 和 H5 不需要授权或已授权
				// #ifdef APP-PLUS
				this.downloadAndSave(); // 支持 saveImageToPhotosAlbum
				// #endif

				// #ifdef H5
				this.downloadImageH5(); // 使用 <a> 下载
				// #endif
			},

			downloadAndSave() {
				uni.downloadFile({
					url: this.joinInfo.image || this.groupQrUrl,
					success: (res) => {
						console.log(res);
						// debugger;
						if (res.statusCode === 200) {
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: () => {
									// debugger;
									uni.showToast({
										title: '保存成功',
										icon: 'success'
									});
								},
								fail: (err) => {
									console.error('保存失败：', err);
									uni.showToast({
										title: '保存失败',
										icon: 'none'
									});
								},
							});
						} else {
							uni.showToast({
								title: '下载失败',
								icon: 'none'
							});
						}
					},
					fail: (err) => {
						console.error('下载错误：', err);
					}
				});
			},
			downloadImageH5() {
				const link = document.createElement('a');
				link.href = this.joinInfo.image || this.groupQrUrl;
				link.download = 'image.jpg'; // 可指定文件名
				document.body.appendChild(link);
				link.click();
				document.body.removeChild(link);
			},
			joinClick(){
				// uni.navigateToMiniProgram({
				// 	appId: 'wx12345678', // 企业小程序 appId（可选）
				// 	// path: 'pages/webview?url=https://work.weixin.qq.com/kfid/xxxxx',
				// 	path: 'pages/webview?url=https://work.weixin.qq.com/gm/3ad1867b587bc86a7f12be9235d1acd2',
				// 	success(res) {
				// 		console.log('跳转成功');
				// 	}
				// });
				// uni.navigateTo({
				// 	url: "/pages_my/webview?wxUrl=" + encodeURIComponent(this.wxUrl),
				// });
				// wx.openOfficialAccountArticle({url: wxUrl})
				uni.previewImage({
					urls: [this.groupQrUrl],
					// longPressActions: {
					// 	itemList: ['发送给朋友', '保存图片', '收藏'],
					// 	success: function(data) {
					// 		console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
					// 	},
					// 	fail: function(err) {
					// 		console.log(err.errMsg);
					// 	}
					// }
				});
			},
			startmessage(e){
				console.log(e);
			},
			completemessage(e){
				console.log(e);
			},
		}
	}
</script>

<style lang="less" scoped>
.page {
	height: 100vh;
	width: 100%;

	.content {
		padding: 30rpx;
		.tips {
			font-size: 32rpx;
			text-align: center;
			padding: 20rpx;
			font-weight: 600;
		}
		.qr-code-box {
			margin: 30rpx auto 80rpx;
			background-color: #fff;
			border-radius: 30rpx;
			width: 640rpx;
			padding-bottom: 60rpx;
			overflow: hidden;
			.qr-code {
				width: 640rpx;
				height: 640rpx;
			}
		}
		.join-btn {
			margin-bottom: 30rpx;
			.btn {
				width: 540rpx;
				height: 88rpx;
				border-radius: 30rpx;
				background-color: #0FA291;
				color: #fff;
				font-size: 36rpx;
			}
		}
	}
}
</style>
